@import '~styles/vars';
@import '~styles/extendables';
@import '~styles/mixins';

.footer {
  @extend %center-x-y;
  @extend %app-width;
  position: fixed;
  bottom: 0;
  padding-bottom: 25px;
  z-index: 50;
  background-image: linear-gradient(
    to bottom,
    rgba($color-black, 0),
    rgba($color-black, 0.5)
  );

  &.light-shadow {
    .btn {
      .icon {
        &:not(.new-msg) {
          @include icon-shadow($color-grey-shade-3, 2px);
        }
      }
    }
  }

  .btn {
    text-shadow: 0 0 1px $color-grey-shade-0;

    .icon {
      font-size: 25px;

      &:not(.new-msg) {
        @include icon-shadow($color-grey-shade-0, 2px);
      }
    }
  }

  .left,
  .center,
  .right {
    width: 33.3%;
    text-align: center;
  }

  .left {
    .btn-chat {
      position: relative;

      .icon {
        &:first-child {
          font-size: 21px;
        }

        &.new-msg {
          color: $color-blue;
          font-size: 12px;
          position: absolute;
          top: -5px;
          right: -3px;
          border-radius: 100%;
        }
      }
    }
  }

  .center {
    position: relative;

    .animated {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -25px 0 0 -25px;

      &:last-child {
        margin: -12.5px 0 0 -20px;
      }

      .btn-capture {
        .icon {
          font-size: 50px;
          border-radius: 100%;
        }
      }

      .btn-archive {
        .icon {
          &:first-child {
            transform: rotate(-5deg);
          }

          &:last-child {
            transform: rotate(5deg);
          }
        }
      }
    }
  }
}
